<template>
  <div class="applytimeline-container nav-bar-top">
    <!-- 导航栏 -->
    <van-nav-bar class="nav-bar" title="售后进度" left-arrow @click-left="$router.back()"/>
    <van-steps direction="vertical" :active="0" class="timeline">
      <van-step v-for="(process, index) in processList" :key="index">
        <div class="item">
          <span class="title">{{process.title}}</span>
          <span v-html="process.message"></span>
          <span class="time">{{process.time}}</span>
        </div>
      </van-step>
    </van-steps>
  </div>
</template>

<script>
export default {
  name: 'applyTimeLine',
  data () {
    return {
      processList: [
        {
          title: '卖家留言',
          message: '<p>超过质保期</p>',
          time: '2016-07-12 13:23'
        },
        {
          title: '卖家拒绝',
          message: '<p></p>',
          time: '2016-07-12 13:22'
        },
        {
          title: '您的售后服务单已申请成功，等待售后处理',
          message: '<p>质量问题<img src="https://api.7wpp.com/uploads/20200930/2eba29bf5f049dd705020e745146badf.jpg"/></p>',
          time: '2016-07-12 12:40'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.applytimeline-container{
  padding: 10px 5px;
  /deep/ .van-step--vertical:not(:last-child)::after{
    border: none;
  }
  /deep/ .item{
    margin-bottom: 20px;
  }
  /deep/ img{
    width: 100%;
  }
  /deep/ .van-step__icon--active, .van-step__title--active{
    color: #e9b461;
  }
}
</style>
